<template>
    <h-section title="标签管理" collapse>
        <div style="width: 50%">
            <a-button block type="dashed" style="margin: 0 0 8px 0" @click="handleCreate">
                <PlusOutlined />
                <span>添加</span>
            </a-button>
            <custom-table ref="ruleTableRef" rowKey="uuid" size="small" :rules="taskTableRules" :columns="columns" :data-source="list" :pagination="false">
                <template #name="{ record }">
                    <a-input v-model:value.trim="record.name" v-if="record.editable" />
                    <div style="max-width: 100%; margin-bottom: 0" v-else>
                        <a-tag style="max-width: 100%" color="blue" v-fitText>{{ record.name }}</a-tag>
                    </div>
                </template>
                <template #type="{ record }">
                    <span>{{ $filters.labelTypeFilter(record.type) }}</span>
                </template>
                <template #action="{ record, index }">
                    <div style="display: inline-block">
                        <a @click="handleSave(record, index)" v-if="record.editable">保存</a>
                        <a @click="handleEdit(index)" v-else>编辑</a>
                    </div>
                    <div style="display: inline-block" v-if="record.id">
                        <a-divider type="vertical" />
                        <a @click="handleDelete(record, index)">删除</a>
                    </div>
                </template>
            </custom-table>
        </div>
    </h-section>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { CustomTable } from '@/components';
import api from '@/api';
import uuid from 'node-uuid';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    components: {
        PlusOutlined,
        CustomTable
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const ruleTableRef = ref<any>();
        const columns = [
            {
                title: '标签名称',
                dataIndex: 'name',
                width: 200,
                align: 'center',
                slots: { customRender: 'name' }
            },
            {
                title: '类型',
                dataIndex: 'type',
                width: 200,
                align: 'center',
                slots: { customRender: 'type' }
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                slots: { customRender: 'action' }
            }
        ];
        const validateRepeat = async (rule: any, value: any) => {
            if (value) {
                const { success, moule } = await api.labelModel.isRepeat({
                    name: value,
                    systemId: props.detail.id,
                    type: '1'
                });
                return success && moule ? Promise.reject('子需求名称重复') : Promise.resolve();
            } else {
                return Promise.reject('子需求名称不能为空');
            }
        };
        const taskTableRules = {
            name: [
                { required: true, message: '名称不能为空' },
                { validator: validateRepeat, message: '名称重复' }
            ]
        };
        const list = ref<any>([]);
        const handleCreate = () => {
            const item = {
                name: '',
                uuid: uuid.v4(),
                editable: true,
                type: '1'
            };
            list.value = [...unref(list), item];
        };
        const handleSave = async (record: Recordable, index: number) => {
            const res = await unref(ruleTableRef).validateRow(record, index);
            if (res) {
                const query = {
                    name: record.name,
                    id: record.id || null,
                    systemId: props.detail.id,
                    type: record.type
                };
                const { success } = await api.labelModel.save(query);
                if (success) {
                    list.value[index].editable = false;
                    getList();
                }
            }
        };
        const handleEdit = (index: number) => {
            list.value[index].editable = true;
        };
        const handleDelete = async (record: Recordable, index: number) => {
            const query = {
                id: record.id
            };
            const { success, errorMsg } = await api.labelModel.delete(query);
            if (success) {
                list.value.splice(index, 1);
            } else {
                message.error(errorMsg);
            }
        };
        const getList = async () => {
            const query = {
                systemId: props.detail.id
                // type: 1,
            };
            const { success, moule } = await api.labelModel.findLabelByName(query);
            if (success) {
                list.value = moule.map((item) => ({
                    ...item,
                    uuid: uuid.v4()
                }));
            }
        };
        getList();
        return {
            ruleTableRef,
            columns,
            list,
            handleCreate,
            handleSave,
            handleEdit,
            handleDelete,
            taskTableRules
        };
    }
});
</script>
<style scoped>
</style>